@charset "utf-8";
@font-face {
    font-family: 'HPIceCream';
    src: url('../fonts/hicecrm-webfont.eot');
    src: url('../fonts/hicecrm-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hicecrm-webfont.woff') format('woff'),
         url('../fonts/hicecrm-webfont.ttf') format('truetype'),
         url('../fonts/hicecrm-webfont.svg#HPIceCream') format('svg');
}

body { font-family: Arial, Helvetica, sans-serif; color: #FFF; padding: 0; margin: 0; }
a { text-decoration: none; color: #FFF; }
.noneDisplay { display: none; }

#wrapper { background: url(../images/bg1.jpg) no-repeat center center; width: 1920px; height: 1004px; }
#wrapperContent { width: 912px; height: auto; margin-left: auto; margin-right: auto; top: 25%; position: relative; z-index: 0; /*border: 1px solid red;*/ }
#content { background: url(../images/bgContent.png) no-repeat; width: 871px; height: 492px; margin-left: auto; margin-right: auto; vertical-align:middle; z-index: 0; /*border: 1px solid green;*/ }
#dynamicContent {  margin-left: auto; margin-right: auto; position: relative; /*border: 1px solid green;*/ top: 4%; }
/*@-moz-document url-prefix() { #dynamicContent { font-size: 53px; color: #000; } }  for FF */

#icons { z-index: 5; }
#icons .browsersIcon { background: url(../images/browsers.png); width: 241px; height: 187px; position: absolute; left: -30px; top: 327px;}
#icons .homeIcon img { margin-left: 10px; border/*\**/: none; }
#icons .homeIcon { position: absolute; top: 425px; left: 750px; }
#icons .brushesIcon { background:url(../images/brushes.png); width: 126px; height: 158px; position: absolute; top: 330px; left: 835px; z-index: 15; }

#menu { font-family: Arial, Helvetica, sans-serif; background: url(../images/menu.png); width: 912px; height: 69px; position: relative; top: -58px; z-index: 10; /*border: 1px solid red;*/ }
@-moz-document url-prefix() { #menu { top: -48px; } } /* for FF */

#menu ul { top: 20px; position: relative; text-align: center; }
#menu ul li { list-style: none; display: inline; padding-right: 35px; text-shadow: 0.05em 0.03em 0.05em #023444; 
			  filter: Shadow(Color=#023444, Direction=135, Strength=0.5); font-size: 23px; }
@-moz-document url-prefix() { #menu ul li { font-size: 24px; } }  /*for FF */ 
#menu ul li:hover { color: #fff200; cursor: pointer; text-shadow: 0.05em 0.03em 0.05em #400000; }
.active { color: #fff200; cursor: pointer; text-shadow: 0.05em 0.03em 0.05em #400000; }


/* Contents */
/* Home */
#home { background: url(../images/centerBanner_backgroud_GioiThieu.jpg) no-repeat; width: 833px; height: 444px; margin-left: auto; margin-right: auto; }

/* Instroduction */
#instroduction { background: url(../images/centerBanner_backgroud_GioiThieu.jpg) no-repeat; width: 833px; height: 444px; margin-left: auto; margin-right: auto; padding-top: 90px; }
#instroduction div { padding-bottom: 5px; text-align: center; margin: 0 auto 0 auto; color: #360000; }
#instroduction div.bold { text-align: center; margin: 0 auto 0 auto; color: #360000; margin-top: 5px; font-weight: bold; }

/* Service */
#service { background: url(../images/service-bg.png) no-repeat; width: 749px; height: 662px; top: -190px; z-index: 0; position: relative; margin-left: auto; margin-right: auto; left: 70px; }

.service-text-logo { top: -50px; position: relative; }
.bannerText { background: url(../images/banner-text.png) no-repeat; width: 93px; height: 31px; }
.cardVisitText { background: url(../images/cardvisit-text.png) no-repeat; width: 123px; height: 31px; }
.logoText { background: url(../images/logo-text.png) no-repeat; width: 61px; height: 31px; }
.websiteText { background: url(../images/website-text.png) no-repeat; width: 106px; height: 31px; }

#banner-tab { background: url(../images/bannervtab.png); width: 36px; height: 90px; left: 3px; position: relative; }
#banner-tab:hover { background: url(../images/bannervtab-hover.png); width: 36px; height: 90px; }

#cardvisit-tab { background: url(../images/cardvisitvtab.png); width: 39px; height: 110px; }
#cardvisit-tab:hover { background: url(../images/cardvisitvtab-hover.png); width: 39px; height: 110px; }

#logo-tab { background: url(../images/logovtab.png); width: 40px; height: 73px; }
#logo-tab:hover { background: url(../images/logovtab-hover.png); width: 40px; height: 73px; }

#website-tab { background: url(../images/websitevtab.png); width: 47px; height: 102px; left: -7px; position: relative; }
#website-tab:hover { background: url(../images/websitevtab-hover.png); width: 47px; height: 102px; }

div.line { width: 200px; border-top: 1px ridge #000; margin: 0 auto 0 auto; margin-top: 40px; }
.product { margin: 0 auto 0 auto; width: 680px; height: 350px; text-align: center; padding-left: 7px; }
.pro11 { width: 120px; height: 120px; background-color: #0F3; float: left;  margin-right: 15px; margin-top: 25px; }
.pro12 { width: 120px; height: 264px; background-color: #0F3; float: left; margin-right: 15px; margin-top: 25px; }
.pro21 { width: 260px; height: 120px; background-color: #0F3; float: left; margin-right: 15px; margin-top: 25px; }
.website-tab { margin: 0 auto 0 auto; width: 690px; margin-top: 10px; text-align: center; }
.website-product { width: 215px; height: 320px; float: left; background-color: #0C0; margin-right: 15px; }

.paging { padding-top: 30px; clear: both; max-height: 33px; width: 360px; margin: 0 auto 0 auto; color: #fff; font-size: 16px; z-index: 15; position: relative; }
.first { background: url(../images/paging-bg-first.png) no-repeat; height: 33px; width: 8px; float: left;  }
.mid { background: url(../images/paging-mid.png) repeat-x; height: 33px; padding-top: 8px; float: left; }
.sep { background: url(../images/paging-sep.png) repeat-x; width: 2px; height: 33px; float: left; position: relative; top: -7px; }
.num { background: url(../images/paging-mid.png) repeat-x; width: 35px; height: 30px; position: relative; top: -8px; padding-top: 8px; float: left; }
.num:hover, .activeNum  { background: url(../images/paging-hover.png) no-repeat; width: 35px; height: 31px; }
.last { background: url(../images/paging-bg-last.png) no-repeat; width: 7px; height: 26px; padding-top: 7px; float: left; }

.shadow { box-shadow: 2px 2px 5px #444;
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=130, Color='#444')";/* For IE 8 */
 		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=130, Color='#444'); /* For IE 5.5 - 7 */}
		
		
/* My Group */
#myGroup {  }

div.designer { color: #00aff0; font-weight: bold; }
.designerProfile { text-align: right; margin-right: 60px; margin-top: 90px; font-weight: bold; color: #012e41; }
div.marketing { color: #a0153e; font-weight: bold; }
.marketingProfile { text-align: left !important;  margin-left: 30px; margin-top: 90px; color: #812846; }
div.pro { color: #01aef0; font-weight: bold; }
.proProfile { text-align: center; margin-right: 60px; margin-top: 90px; color: #fffffd; }
.pointer { cursor: pointer; }
.name { font-size: 28px; position: relative; top: 40px; left: 15px; }
.textShadow { text-shadow: #666666 1px 1px 1px; filter: Shadow(Color=#666666, Direction=135, Strength=1); }

#designer1 { background: url(../images/designer-bg.png) no-repeat; width: 647px; height: 366px; left: 100px; top: 100px; position: relative; }
#designerImg1 { background:url(../images/thong.png); width: 187px; height: 209px; z-index: 25; position: absolute; left: -70px; top: 20px; }
#designerImg1:hover, #designerImg1.active { background: url(../images/thong.png) no-repeat; left: -70px; top: -20px; }

#designer2 { background: url(../images/designer-bg.png) no-repeat; width: 647px; height: 366px; left: 100px; top: 100px; position: relative; }
#designerImg2 { background:url(../images/thy.png) no-repeat; width: 181px; height: 203px; z-index: 20; position: absolute; left: 60px; top: -80px; }
#designerImg2:hover, #designerImg2.active { background:url(../images/thy.png) no-repeat; left: 60px; top: -120px; }

#marketing1 { background: url(../images/marketing-bg.png) no-repeat; width: 647px; height: 366px; left: 100px; top: 100px; position: relative; }
#marketingImg1 { background: url(../images/minh.png) no-repeat; width: 172px; height: 195px; position: absolute; z-index: 15; left: 230px; top: -90px; }
#marketingImg1:hover, #marketingImg1.active { background: url(../images/minh.png) no-repeat; left: 230px; top: -130px; }

#marketing2 { background: url(../images/marketing-bg.png) no-repeat; width: 647px; height: 366px; left: 100px; top: 100px; position: relative; }
#marketingImg2 { background: url(../images/hoaianh.png); width: 182px; height: 204px; position: absolute; z-index: 0; left: 390px; top: -100px; }
#marketingImg2:hover, #marketingImg2.active { background: url(../images/hoaianh.png) no-repeat; left: 390px; top: -140px; }

#pro1 { background: url(../images/pro-bg.png) no-repeat; width: 647px; height: 366px; left: 100px; top: 100px; position: relative; }
#proImg1 { background: url(../images/kiet.png); width: 182px; height: 204px; position: absolute; z-index: 5; left: 550px; top: -90px; }
#proImg1:hover, #proImg1.active { background: url(../images/kiet.png) no-repeat; left: 550px; top: -130px; }

#pro2 { background: url(../images/pro-bg.png) no-repeat; width: 647px; height: 366px; left: 100px; top: 100px; position: relative; }
#proImg2 { background:url(../images/long.png) no-repeat; width: 184px; height: 285px; position: absolute; z-index: 10; left: 710px; top: -70px; }
#proImg2:hover, #proImg2.active { background:url(../images/long.png) no-repeat; left: 710px; top: -130px; }

#pro3 { background: url(../images/pro-bg.png) no-repeat; width: 647px; height: 366px; left: 100px; top: 100px; position: relative; }
#proImg3 { background: url(../images/linh.png) no-repeat; width: 198px; height: 296px; position: absolute; z-index: 15; left: 728px; top: 90px; }
#proImg3:hover, #proImg3.active { background: url(../images/linh.png) no-repeat; left: 728px; top: 50px; }

#pro4 { background: url(../images/pro-bg.png) no-repeat; width: 647px; height: 366px; left: 100px; top: 100px; position: relative; }
/*#proImg4 { background: url(../images/luan.jpg) no-repeat; width: 152px; height: 164px; position: absolute; z-index: 20; left: 728px; top: 200px; }
#proImg4:hover, , #proImg4.active { background: url(../images/luan.jpg) no-repeat; left: 728px; top: 130px; }*/

/* Contact */
#contact { background: url(../images/contact-bg.png) no-repeat; width: 788px; height: 724px; position: relative; left: 60px; top: -200px; padding-top: 118px; font-size: 14px; }

#contact div.left { color: #004a65; position: relative; left: 75px; float: left; width: 90px; padding-top: 1px; /*border: 1px solid red;*/ font-weight: bold; text-align: right; }
#contact div.right { position: relative; left: 100px; color: #004a65; float: left; width: 500px; padding-top: 1px; /*border: 1px solid green;*/ }
.clear { clear: both; }

#title1 { font-size: 24px; font-weight: bold; position: relative; left: 215px; top: -40px; }
#title2 { font-size: 24px; font-weight: bold; position: relative; left: 180px; top: 35px; }

#contactForm { left: 120px; padding-top: 45px; position: relative;  }
#contactForm div { font-weight: normal !important; margin-top: 5px; }
#contactForm div.left { width: 140px; margin-top: 10px; text-align: right; }
#contactForm div.right { margin-top: 10px; }
#contactForm div.right span { margin-right: 55px; color: #1a9f1f; }

#contactForm div input[type=text] { height: 12px; width: 140px; border-left: 1px solid #0798cd; border-right: 1px solid #0798cd; border-top: 2px solid #7fc9e6; border-bottom: 2px solid #7fc9e6; width: 200px; }
#contactForm div textarea { border-left: 1px solid #0897cf; border-right: 1px solid #0798cd; border-top: 2px solid #7fc9e6; border-bottom: 2px solid #7fc9e6; width: 250px; height: 70px; }
#contactForm div input[type=submit].sendBtn { background: url(../images/send-btn.png) no-repeat; width: 82px; height: 35px; border: none; }
#contactForm div input[type=reset].delBtn { background: url(../images/del-btn.png) no-repeat; width: 82px; height: 35px; border: none; }

#contactForm table tr { height: 30px; }
#contactForm table tr td div { color: #19a01e; }
#contactForm table .right input[type=text] { width: 140px; border-left: 1px solid #0798cd; border-right: 1px solid #0798cd; border-top: 2px solid #7fc9e6; border-bottom: 2px solid #7fc9e6; width: 200px; }
#contactForm table .right textarea { border-left: 1px solid #0897cf; border-right: 1px solid #0798cd; border-top: 2px solid #7fc9e6; border-bottom: 2px solid #7fc9e6; width: 250px; height: 70px; }
#contactForm table .left { color: #004a65;  text-align: right; width: 140px; }
#contactForm table .right { color: #004a65; padding-left: 20px; }

#contactForm table tr td input[type=submit].sendBtn { background: url(../images/send-btn.png) no-repeat; width: 82px; height: 35px; border: none; }
#contactForm table tr td input[type=reset].delBtn { background: url(../images/del-btn.png) no-repeat; width: 82px; height: 35px; border: none; }
